<template>
    <view class="charts-box">
        <qiun-data-charts
            type="area"
            :eopts="eopts"
            :chartData="chartData"
            :canvas2d="true"
            :echartsH5="true"
            :echartsApp="true"
            canvasId="hbvtPTaTAPJqIXeyZuhztKNKUuqhNvDH"
        />
    </view>
</template>

<script>
export default {
    props: {
        lineData: {
            type: [Object, Array],
            default: () => []
        }
    },
    data() {
        return {
            chartData: {},
            //您可以通过修改 config-ucharts.js 文件中下标为 ['area'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
            opts: {
                color: [
                    '#1890FF',
                    '#91CB74',
                    '#FAC858',
                    '#EE6666',
                    '#73C0DE',
                    '#3CA272',
                    '#FC8452',
                    '#9A60B4',
                    '#ea7ccc'
                ],
                //   padding: [15,15,0,15],
                enableScroll: false,
                dataLabel: false,
                enableMarkLine: true,
                legend: {
                    show: false
                },
                xAxis: {
                    // disableGrid: true,
                    fontSize: 10,
                    labelCount: 10
                    // scrollShow: true,
                },
                yAxis: {
                    gridType: 'dash',
                    dashLength: 2,
                    min: 0
                },
                extra: {
                    area: {
                        type: 'curve',
                        opacity: 0.5,
                        addLine: true,
                        width: 2,
                        gradient: true,
                        activeType: 'hollow'
                    }
                }
            },
            eopts: {
                legend: {
                    show: false
                },
                xAxis: {
                    axisTick: {
                        inside: true
                    }
                },
                yAxis: {
                    name: '(mm)',
                    nameTextStyle: {
                        color: '#000',
                        align: 'right',
                        padding: [0, 10, 0, 0]
                    },
                    axisLine: {
                        show: false
                    },
                    splitLine: {
                        show: false
                    }
                }
            }
        }
    },
    mounted() {
        this.setChartsData()
    },
    watch: {
        lineData: {
            deep: true,
            handler(val) {
                this.setChartsData()
            }
        }
    },
    methods: {
        setChartsData() {
            const res = {
                categories: this.lineData.categories,
                series: [
                    {
                        name: '液位',
                        data: this.lineData.data,
                        format: 'formatyewei',
                        symbol: 'none',
                        smooth: true,
                        label: {
                            show: false
                        },
                        areaStyle: {
                            opacity: 0.4
                        },
                        linearGradient: [
                            0,
                            0,
                            0,
                            1,
                            [
                                {
                                    offset: 0,
                                    color: 'RGBA(15, 117, 255, 1)'
                                },
                                {
                                    offset: 1,
                                    color: 'RGBA(15, 117, 255, 0)'
                                }
                            ]
                        ]
                    }
                ]
            }
            this.chartData = JSON.parse(JSON.stringify(res))
        }
    }
}
</script>

<style scoped>
/* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
.charts-box {
    width: 630rpx;
    height: 400rpx;
    margin-top: 20rpx;
}
</style>
